<template>
  <div class="details">
    <div class="z">
      <template>
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide>500*250</swiper-slide>
          <swiper-slide>500*250</swiper-slide>
          <swiper-slide>500*250</swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </template>
      <div class="z1">
        <span>【白菜豆腐汤】 好喝好吃营养有健康</span>
        <img src="../assets/Snipaste_2022-06-12_15-05-02.png" alt="" />
        <button>收藏</button>
        <p>
          食谱号 xxx &nbsp;&nbsp;&nbsp;阅读 xxx次&nbsp;&nbsp;&nbsp; 收藏 xxx次
        </p>
        <hr />
        <img src="/" alt="食谱logo" />
      </div>
    </div>

    <div class="intro">
      <div>
        <div class="ti">简介</div>
        <div class="text">
          这道白菜豆腐汤，制作非常简单，可以说零失败。口感鲜美，营养价值也高。非常适合现在这个干燥的季节食用。
          大白菜含有大量的粗纤维，可促进肠壁蠕动，帮助消化，防止大便干燥，促进排便，稀释肠道毒素，既能治疗便秘，又有助于营养吸收。其味道清爽，开胃健脾，富含蛋白质、脂肪、多种维生素及钙、磷、铁等矿物质，常食有助于增强机体免疫功能，对减肥健美也有帮助。
          豆腐为补益清热养生食品，常食可补中益气、清热润燥、生津止渴、清洁肠胃。更适于热性体质、口臭口渴、肠胃不清、热病后调养者食用
        </div>
      </div>
      <div>
        <div class="ti">材料</div>
        <div class="text">
          这道白菜豆腐汤，制作非常简单，可以说零失败。口感鲜美，营养价值也高。非常适合现在这个干燥的季节食用。
        </div>
      </div>
      <div>
        <div class="ti">做法</div>
        <div class="text">
          第一步：准备食材。白菜叶适量、卤水豆腐1小块、香葱适量、粉丝适量。
          第二步：将白菜叶切成块、豆腐切块、香葱切末、粉丝泡软备用。
          第三步：锅中倒入适量的水，大火烧开后，将白菜叶、豆腐、粉丝放入锅中。（最好用砂锅来炖）
          第四步：待锅中再次煮开后，转小火炖2分钟，然后放入1小勺盐调味。关火后再淋少许香油，撒少许香葱碎即可
        </div>
      </div>
      <div>
        <div class="ti">小诀窍</div>
        <div class="text">
          这道白菜豆腐汤，制作非常简单，可以说零失败。口感鲜美，营养价值也高。非常适合现在这个干燥的季节食用。
        </div>
      </div>
      <div>
        <div class="ti">相关</div>
        <div class="text">
          这道白菜豆腐汤，制作非常简单，可以说零失败。口感鲜美，营养价值也高。非常适合现在这个干燥的季节食用。
        </div>
      </div>
    </div>
    <div class="pg">
      <div class="ti1">
        <span>相关食谱</span>
        <div>
          <button @click="num--">上一页</button>
          <span>{{ num }}/2</span>
          <button @click="num++">下一页</button>
        </div>
      </div>
      <div class="tj">
        <div>
          <router-link to="/about">
            <img src="/" />
            <span>饼干</span>
          </router-link>
        </div>
        <div>
          <router-link to="/about">
            <img src="/" />
            <span>饼干</span>
          </router-link>
        </div>
        <div>
          <router-link to="/about">
            <img src="/" />
            <span>饼干</span>
          </router-link>
        </div>
        <div>
          <router-link to="/about">
            <img src="/" />
            <span>饼干</span>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  name: "swiper-example-navigation",
  title: "Navigation",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      num: 1,
      items: [],
    };
  },
};
</script>

<style lang="scss" scoped>
.details {
  width: 900px;
  height: 260px;
  // border: 1px solid black;
  margin: 0 auto;
}
.z {
  display: flex;
  .z1 {
    border: 1px solid #bfbab3;
    border-radius: 5px;
    height: 248px;
    width: 330px;
    padding-left: 10px;
    span {
      display: block;
      margin: 20px 20px 0px 0px;
    }
    img {
      display: block;
      width: 250px;
      margin-top: 10px;
    }
    button {
      width: 180px;
      line-height: 40px;
      margin: 10px 10px 0px 10px;
      color: white;
      font-size: 20px;
      border: none;
      background-color: #fa7e3e;
    }
    p {
      color: #bfbab3;
    }
    hr {
      border: 1px solid #bfbab3;
    }
  }
}
.intro {
  width: 840px;
  border: 1px solid #bfbab3;
  border-radius: 5px;
  margin-top: 10px;
  > div {
    // border: 1px solid #bfbab3;
    margin: 15px;
    margin-bottom: 30px;
    .ti {
      float: left;
      color: #bfbab3;
      width: 80px;
    }
    .text {
      display: inline-block;
      width: 700px;
    }
  }
}
.pg {
  width: 823px;
  border: 1px solid #bfbab3;
  border-radius: 5px;
  margin: 10px 0;
  padding: 10px;
  .ti1 {
    display: flex;
    justify-content: space-between;
    > span {
      color: #bfbab3;
    }
  }
  .tj {
    display: flex;
    text-align: center;
    justify-content: space-between;
    margin-top: 10px;
    div {
      border: 1px solid #bfbab3;
    }
    img {
      display: block;
      background-color: #bfbab3;
      width: 190px;
      height: 100px;
    }
    span {
      display: block;
      margin: 5px;
      font-size: 13px;
    }
    a {
      text-decoration: none;
      color: black;
    }
  }
}
.swiper {
  width: 500px;
  height: 250px;
  background-color: gray;
  margin: 0px;
  border-radius: 5px;
}
</style>